﻿<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5
Version: 1.6.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <meta charset="utf-8" />
    <title>User Profile</title>

    <meta name="description" content="user profile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Fonts-->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css">

    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
    <link href="assets/css/demo.min.css" rel="stylesheet" />
    <link href="assets/css/typicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="" rel="stylesheet" type="text/css" />

    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
	
	<script src="assets/js/react/react.js"></script>
    <script src="assets/js/react/react-dom.js"></script>
    <script src="assets/js/react/browser.min.js"></script>
</head>
<!-- /Head -->
<!-- Body -->
<body>
    
	<div id="content">
	</div>
	
	<script type="text/babel">
	var NavbarBrand = React.createClass({
		render: function() {
			return (
			  <div className="navbar-header pull-left">
                    <a href="#" className="navbar-brand">
                        <small>
                            <img src="assets/img/logo.png" alt="" />
                        </small>
                    </a>
                </div>
			);
		 }
	});
	
	var SideBar = React.createClass({
		handleClick: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			if (!$('#sidebar').is(':visible'))
            $("#sidebar").toggleClass("hide");
			$("#sidebar").toggleClass("menu-compact");
			$(".sidebar-collapse").toggleClass("active");
			b = $("#sidebar").hasClass("menu-compact");

			if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
				$(".sidebar-menu").slimScroll({ destroy: true });
				$(".sidebar-menu").attr('style', '');
			}
			if (b) {
				$(".open > .submenu").removeClass("open");
			} else {
				if ($('.page-sidebar').hasClass('sidebar-fixed')) {
					var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
					$('.sidebar-menu').slimscroll({
						height: 'auto',
						position: position,
						size: '3px',
						color: themeprimary
					});
				}
			}	
		},
		render: function() {
			return (
			  <div className="sidebar-collapse" id="sidebar-collapse" onClick={this.handleClick}>
                    <i className="collapse-icon fa fa-bars"></i>
                </div>
			);
		 }
	});
	
	var AccountItem = React.createClass({
		render: function() {
			return (
			  <li>
                  <a href="#">
                   <div className="clearfix">
					   <div className="notification-icon">
						<i className="fa fa-phone bg-themeprimary white"></i>
					   </div>
					   <div className="notification-body">
						<span className="title">{this.props.title}</span>
						<span className="description">{this.props.desc}</span>
					   </div>
					   <div className="notification-extra">
						 <i className="fa fa-clock-o themeprimary"></i>
						 <span className="description">{this.props.extra}</span>
						</div>
                   </div>
                  </a>
              </li>
			);
		 }
	});
	
	var MessageItem = React.createClass({
		render: function() {
			return (
			  <li>
				<a href="#">
                    <img src="assets/img/avatars/divyia.jpg" className="message-avatar" alt="Divyia Austin" />
                    <div className="message">
                        <span className="message-sender">
							{this.props.sender}
                        </span>
                        <span className="message-time">
							{this.props.time}
                        </span>
                        <span className="message-subject">
							{this.props.subject}
                        </span>
                        <span className="message-body">
							{this.props.body}
                        </span>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var TaskItem = React.createClass({
		render: function() {
			return (
			  <li>
                <a href="#">
                    <div className="clearfix">
                        <span className="pull-left">{this.props.title}</span>
                        <span className="pull-right">{this.props.percent}</span>
                    </div>
                    <div className="progress progress-xs">
						<div style={{width:'65%'}} className="progress-bar"></div>
                    </div>
                </a>
              </li>
			);
		 }
	});
	
	var NavbarHeaderRight = React.createClass({
		chatClick: function (e) {
			$('.page-chatbar').toggleClass('open');
			$("#chat-link").toggleClass('open');
		},
		createCookie: function (e) {
			alert("hello");
			if (100) {
				var date = new Date();
				date.setTime(date.getTime() + (100 * 24 * 60 * 60 * 1000));
				var expires = "; expires=" + date.toGMTString();
			}
			else var expires = "";
			document.cookie = e + expires + "; path=/";
		},
		readCookie: function (e) {
			alert("hello");
			var nameEq = e + "=";
			var ca = document.cookie.split(';');
			for (var i = 0; i < ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') c = c.substring(1, c.length);
				if (c.indexOf(nameEq) == 0) return c.substring(nameEq.length, c.length);
			}
			return null;
		},

		setCookiesForFixedSettings :function () {
			alert("hello");
			createCookie("navbar-fixed-top"+ "=" + $('#checkbox_fixednavbar').is(':checked'));
			createCookie("sidebar-fixed" + "=" + $('#checkbox_fixedsidebar').is(':checked'));
			createCookie("breadcrumbs-fixed"+"="+ $('#checkbox_fixedbreadcrumbs').is(':checked'));
			createCookie("page-header-fixed"+"="+ $('#checkbox_fixedheader').is(':checked'));

			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			if ($('#checkbox_fixedsidebar').is(':checked')) {
				if (!$('.page-sidebar').hasClass('menu-compact')) {
					//Slim Scrolling for Sidebar Menu in fix state
					$('.sidebar-menu').slimscroll({
						position: position,
						size: '3px',
						color: themeprimary,
						height: $(window).height() - 90,
					});
				}
			} else {
				if ($(".sidebar-menu").closest("div").hasClass("slimScrollDiv")) {
					$(".sidebar-menu").slimScroll({ destroy: true });
					$(".sidebar-menu").attr('style', '');
				}
			}
		},
		initiateSettings: function (e) {
			
			if (readCookie("navbar-fixed-top") != null) {
				if (readCookie("navbar-fixed-top") == "true") {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').addClass('navbar-fixed-top');
				}
			}

			if (readCookie("sidebar-fixed") != null) {
				if (readCookie("sidebar-fixed") == "true") {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').addClass('sidebar-fixed');

					if (!$(".page-sidebar").hasClass("menu-compact")) {
						var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
						$('.sidebar-menu').slimscroll({
							height: $(window).height() - 90,
							position: position,
							size: '3px',
							color: themeprimary
						});
					}
				}
			}
			if (readCookie("breadcrumbs-fixed") != null) {
				if (readCookie("breadcrumbs-fixed") == "true") {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').addClass('breadcrumbs-fixed');
				}
			}
			if (readCookie("page-header-fixed") != null) {
				if (readCookie("page-header-fixed") == "true") {
					$('#checkbox_fixedheader').prop('checked', true);
					$('.page-header').addClass('page-header-fixed');
				}
			}

			$('#checkbox_fixednavbar').change(function () {
				$('.navbar').toggleClass('navbar-fixed-top');
				if (($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', false);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}

				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}

				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});

			$('#checkbox_fixedsidebar').change(function () {
				$('.page-sidebar').toggleClass('sidebar-fixed');
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedbreadcrumbs').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', false);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedbreadcrumbs').change(function () {
				$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				if (($('#checkbox_fixedheader').is(":checked")) && !($(this).is(":checked"))) {
					$('#checkbox_fixedheader').prop('checked', false);
					$('.page-header').toggleClass('page-header-fixed');
				}
				setCookiesForFixedSettings();
			});
			$('#checkbox_fixedheader').change(function () {
				$('.page-header').toggleClass('page-header-fixed');
				if (!($('#checkbox_fixedbreadcrumbs').is(":checked"))) {
					$('#checkbox_fixedbreadcrumbs').prop('checked', true);
					$('.page-breadcrumbs').toggleClass('breadcrumbs-fixed');
				}
				if (!($('#checkbox_fixedsidebar').is(":checked"))) {
					$('#checkbox_fixedsidebar').prop('checked', true);
					$('.page-sidebar').toggleClass('sidebar-fixed');
				}
				if (!($('#checkbox_fixednavbar').is(":checked"))) {
					$('#checkbox_fixednavbar').prop('checked', true);
					$('.navbar').toggleClass('navbar-fixed-top');
				}
				setCookiesForFixedSettings();
			});
		},
		settingsClick: function (e) {
			$('.navbar-account').toggleClass('setting-open');
		},
		componentDidMount: function() {
			this.initiateSettings();
		},
		render: function() {
			return (
			  <div className="navbar-header pull-right">
                    <div className="navbar-account">
                        <ul className="account-area">
                            <li>
                                <a className=" dropdown-toggle" data-toggle="dropdown" title="Notifications" href="#">
                                    <i className="icon fa fa-warning"></i>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
                                    <AccountItem title="Skype meeting with Patty" desc="01:00 pm" extra="office" />
									<AccountItem title="Uncharted break" desc="03:30 pm - 05:15 pm" extra="" />
									<AccountItem title="Kate birthday party" desc="08:30 pm" extra="at home" />
									<AccountItem title="Dinner with friends" desc="10:30 pm" extra="" />
                                    <li className="dropdown-footer ">
                                        <span>
                                            Today, March 28
                                        </span>
                                        <span className="pull-right">
                                            10°c
                                            <i className="wi wi-cloudy"></i>
                                        </span>
                                    </li>
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Mails" href="#">
                                    <i className="icon fa fa-envelope"></i>
                                    <span className="badge">3</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-messages">
                                    <MessageItem sender="Divyia Austin" time="2 minutes ago" subject="Here's the recipe for apple pie" body="to identify the sending application when the senders image is shown for the main icon" />
									<MessageItem sender="Bing.com" time="Yesterday" subject="Bing Newsletter: The January Issue‏" body="Discover new music just in time for the Grammy® Awards." />
									<MessageItem sender="Nicolas" time="Friday, September 22" subject="New 4K Cameras" body="The 4K revolution has come over the horizon and is reaching the general populous" />
                                </ul>
                                
                            </li>
                            <li>
                                <a className="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
                                    <i className="icon fa fa-tasks"></i>
                                    <span className="badge">4</span>
                                </a>
                                <ul className="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
                                    <li className="dropdown-header bordered-darkorange">
                                        <i className="fa fa-tasks"></i>
                                        4 Tasks In Progress
                                    </li>
                                    <TaskItem title="Account Creation" percent="65%" />
									<TaskItem title="Profile Data" percent="35%" />
									<TaskItem title="Updating Resume" percent="75%" />
									<TaskItem title="Adding Contacts" percent="10%" />
                                    <li className="dropdown-footer">
                                        <a href="#">
                                            See All Tasks
                                        </a>
                                        <button className="btn btn-xs btn-default shiny darkorange icon-only pull-right"><i className="fa fa-check"></i></button>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a className="wave in" id="chat-link" title="Chat" href="#" onClick={this.chatClick}>
                                    <i className="icon glyphicon glyphicon-comment"></i>
                                </a>
                            </li>
                            <li>
                                <a className="login-area dropdown-toggle" data-toggle="dropdown">
                                    <div className="avatar" title="View your public profile">
                                        <img src="assets/img/avatars/adam-jansen.jpg" />
                                    </div>
                                    <section>
                                        <h2><span className="profile"><span>David Stevenson</span></span></h2>
                                    </section>
                                </a>
                                
                                <ul className="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                    <li className="username"><a>David Stevenson</a></li>
                                    <li className="email"><a>David.Stevenson@live.com</a></li>
                                    
                                    <li>
                                        <div className="avatar-area">
                                            <img src="assets/img/avatars/adam-jansen.jpg" className="avatar" />
                                            <span className="caption">Change Photo</span>
                                        </div>
                                    </li>
                                    
                                    <li className="edit">
                                        <a href="profile.html" className="pull-left">Profile</a>
                                        <a href="#" className="pull-right">Setting</a>
                                    </li>
                                    
                                    <li className="theme-area">
                                        <ul className="colorpicker" id="skin-changer">
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#5DB2FF'}} rel="assets/css/skins/blue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#2dc3e8'}} rel="assets/css/skins/azure.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#03B3B2'}} rel="assets/css/skins/teal.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#53a93f'}} rel="assets/css/skins/green.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#FF8F32'}} rel="assets/css/skins/orange.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#cc324b'}} rel="assets/css/skins/pink.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#AC193D'}} rel="assets/css/skins/darkred.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#8C0095'}} rel="assets/css/skins/purple.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#0072C6'}} rel="assets/css/skins/darkblue.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#585858'}} rel="assets/css/skins/gray.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#474544'}} rel="assets/css/skins/black.min.css"></a></li>
                                            <li><a className="colorpick-btn" href="#" style={{backgroundColor:'#001940'}} rel="assets/css/skins/deepblue.min.css"></a></li>
                                        </ul>
                                    </li>
                                    
                                    <li className="dropdown-footer">
                                        <a href="login.html">
                                            Sign out
                                        </a>
                                    </li>
                                </ul>
                                
                            </li>
                            
                        </ul>
						<div className="setting">
                            <a id="btn-setting" title="Setting" href="#" onClick={this.settingsClick}>
                                <i className="icon glyphicon glyphicon-cog"></i>
                            </a>
                        </div>
						<div className="setting-container">
                            <label>
                                <input type="checkbox" id="checkbox_fixednavbar" />
                                <span className="text">Fixed Navbar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedsidebar" />
                                <span className="text">Fixed SideBar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedbreadcrumbs" />
                                <span className="text">Fixed BreadCrumbs</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedheader" />
                                <span className="text">Fixed Header</span>
                            </label>
                        </div>
                        
                    </div>
                </div>
			);
		 }
	});
	
	var Navbar = React.createClass({
		render: function() {
			return (
				<div className="navbar">
					<div className="navbar-inner">
						<div className="navbar-container">
							<NavbarBrand />
							<SideBar />
							<NavbarHeaderRight />
						</div>
					</div>
				</div>
			);
		 }
	});
	
	var MenuItemIcon = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
					<i className="menu-icon fa fa-th"></i>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var MenuItem = React.createClass({
		render: function() {
			return (
				<a href={this.props.href}>
                    <span className="menu-text">{this.props.text}</span>
                </a>
			);
		 }
	});
	
	var ParentMenuIcon = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <i className="menu-icon fa fa-desktop"></i>
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var ParentMenu = React.createClass({
		render: function() {
			return (
				<a href="#" className="menu-dropdown">
                    <span className="menu-text">{this.props.text}</span>
                    <i className="menu-expand"></i>
                </a>
			);
		 }
	});
	
	var PageSidebar = React.createClass({
		bodyClickHandler: function (e) {
			var b = $("#sidebar").hasClass("menu-compact");
			var menuLink = $(e.target).closest("a");
			if (!menuLink || menuLink.length == 0)
				return;
			if (!menuLink.hasClass("menu-dropdown")) {
				if (b && menuLink.get(0).parentNode.parentNode == this) {
					var menuText = menuLink.find(".menu-text").get(0);
					if (e.target != menuText && !$.contains(menuText, e.target)) {
						return false;
					}
				}
				return;
			}
			var submenu = menuLink.next().get(0);
			if (!$(submenu).is(":visible")) {
				var c = $(submenu.parentNode).closest("ul");
				if (b && c.hasClass("sidebar-menu"))
					return;
				c.find("> .open > .submenu")
					.each(function () {
						if (this != submenu && !$(this.parentNode).hasClass("active"))
							$(this).slideUp(200).parent().removeClass("open");
					});
			}
			if (b && $(submenu.parentNode.parentNode).hasClass("sidebar-menu"))
				return false;
			$(submenu).slideToggle(200).parent().toggleClass("open");
			return false;
		},
		render: function() {
			return (
				<div className="page-sidebar" id="sidebar">
                
                <div className="sidebar-header-wrapper">
					<input type="text" className="searchinput" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                </div>
                
                <ul className="nav sidebar-menu" onClick={this.bodyClickHandler}>
                    
                    <li>
                        <MenuItemIcon href="index.html" text="Dashboard" />
                    </li>
                    
                    <li>
                        <MenuItemIcon href="databoxes.html" text="Data Boxes" />
                    </li>
                    
                    <li>
                        <MenuItemIcon href="widgets.html" text="Widgets" />
                    </li>
                    
                    <li>
						<ParentMenuIcon text="Elements" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="elements.html" text="Basic Elements" />
                            </li>
                            <li>
								<ParentMenu text="Icons" />

                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="font-awesome.html" text="Font Awesome" />
                                    </li>
                                    <li>
										<MenuItemIcon href="glyph-icons.html" text="Glyph Icons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="typicon.html" text="Typicons" />
                                    </li>
                                    <li>
										<MenuItemIcon href="weather-icons.html" text="Weather Icons" />
                                    </li>
                                </ul>
                            </li>
                            <li>
								<MenuItem href="tabs.html" text="Tabs & Accordions" />
                            </li>
                            <li>
								<MenuItem href="alerts.html" text="Alerts & Tooltips" />
                            </li>
                            <li>
								<MenuItem href="modals.html" text="Modals & Wells" />
                            </li>
                            <li>
								<MenuItem href="buttons.html" text="Buttons" />
                            </li>
                            <li>
								<MenuItem href="nestable-list.html" text="Nestable List" />
                            </li>
                            <li>
								<MenuItem href="treeview.html" text="Treeview" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Tables" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="tables-simple.html" text="Simple & Responsive" />
                            </li>
                            <li>
								<MenuItem href="tables-data.html" text="Data Tables" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Forms" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="form-layouts.html" text="Form Layouts" />
                            </li>

                            <li>
								<MenuItem href="form-inputs.html" text="Form Inputs" />
                            </li>

                            <li>
								<MenuItem href="form-pickers.html" text="Data Pickers" />
                            </li>
                            <li>
								<MenuItem href="form-wizard.html" text="Wizard" />
                            </li>
                            <li>
								<MenuItem href="form-validation.html" text="Validation" />
                            </li>
                            <li>
								<MenuItem href="form-editors.html" text="Editors" />
                            </li>
                            <li>
								<MenuItem href="form-inputmask.html" text="Input Mask" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="Charts" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="flot.html" text="Flot Charts" />
                            </li>

                            <li>
								<MenuItem href="morris.html" text="Morris Charts" />
                            </li>
                            <li>
								<MenuItem href="sparkline.html" text="Sparkline Charts" />
                            </li>
                            <li>
								<MenuItem href="easypiecharts.html" text="Easy Pie Charts" />
                            </li>
                            <li>
								<MenuItem href="chartjs.html" text="ChartJS" />
                            </li>
                        </ul>
                    </li>

                    <li className="active">
						<MenuItemIcon href="profile.html" text="Profile" />
                    </li>
	
                    <li>
						<ParentMenuIcon text="Mail" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="inbox.html" text="Inbox" />
                            </li>

                            <li>
								<MenuItem href="message-view.html" text="View Message" />
                            </li>
                            <li>
								<MenuItem href="message-compose.html" text="Compose Message" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="calendar.html" text="Calendar" />
                    </li>

                    <li>
						<ParentMenuIcon text="Pages" />
                        <ul className="submenu">
                            <li>
								<MenuItem href="timeline.html" text="Timeline" />
                            </li>
                            <li>
								<MenuItem href="pricing.html" text="Pricing Tables" />
                            </li>

                            <li>
								<MenuItem href="invoice.html" text="Invoice" />
                            </li>

                            <li>
								<MenuItem href="login.html" text="Login" />
                            </li>
                            <li>
								<MenuItem href="register.html" text="Register" />
                            </li>
                            <li>
								<MenuItem href="lock.html" text="Lock Screen" />
                            </li>
                            <li>
								<MenuItem href="typography.html" text="Typography" />
                            </li>
                        </ul>
                    </li>
                    <li>
						<ParentMenuIcon text="More Pages" />

                        <ul className="submenu">
                            <li>
								<MenuItem href="error-404.html" text="Error 404" />
                            </li>

                            <li>
								<MenuItem href="error-500.html" text="Error 500" />
                            </li>
                            <li>
								<MenuItem href="blank.html" text="Blank Page" />
                            </li>
                            <li>
								<MenuItem href="grid.html" text="Grid" />
                            </li>
                            <li>
								<ParentMenu text="Multi Level Menu" />
                                
                                <ul className="submenu">
                                    <li>
										<MenuItemIcon href="#" text="Level 3" />
                                    </li>

                                    <li>
										<ParentMenuIcon text="Level 4" />

                                        <ul className="submenu">
                                            <li>
												<MenuItemIcon href="#" text="Some Item" />
                                            </li>

                                            <li>
												<MenuItemIcon href="#" text="Another Item" />
                                            </li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </li>

                    <li>
						<ParentMenuIcon text="Right to Left" />
                        <ul className="submenu">
                            <li>
                                <a>
                                    <span className="menu-text">RTL</span>
                                    <label className="pull-right margin-top-10">
                                        <input id="rtl-changer" className="checkbox-slider slider-icon colored-primary" type="checkbox" />
                                        <span className="text"></span>
                                    </label>
                                </a>
                            </li>
                            <li>
								<MenuItem href="index-rtl-ar.html" text="Arabic Layout" />
                            </li>

                            <li>
								<MenuItem href="index-rtl-fa.html" text="Persian Layout" />
                            </li>

                        </ul>
                    </li>
                    <li>
						<MenuItemIcon href="versions.html" text="BeyondAdmin Versions" />
                    </li>
                </ul>
            </div>
			);
		 }
	});
	
	var Contact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').hide();
			$('.page-chatbar .chatbar-messages').show();
		},
		render: function() {
			return (
				<li className="contact" onClick={this.handleClick}>
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/John-Smith.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
							<div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.last}
                        </div>
                    </div>
                </li>
			);
		 }
	});
	
	var ContactList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-contacts .contacts-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (86 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="contacts-list">
					<Contact name="Divyia Philips" status="online" last="last week" />
					<Contact name="Adam Johnson" status="left 4 mins ago" last="today" />
					<Contact name="John Smith" status="online" last="1:57 am" />
					<Contact name="Osvaldus Valutis" status="online" last="today" />
					<Contact name="Javi Jimenez" status="online" last="today" />
					<Contact name="Stephanie Walter" status="online" last="yesterday" />
					<Contact name="Sergey Azovskiy" status="offline since oct 24" last="22 oct" />
					<Contact name="Lee Munroe" status="online" last="today" />
					<Contact name="Divyia Philips" status="online" last="last week" />
                </ul>
			);
		 }
	});
	
	var ContactSearch = React.createClass({
		render: function() {
			return (
				<div className="contacts-search">
                    <input type="text" className="searchinput" placeholder="Search Contacts" />
                    <i className="searchicon fa fa-search"></i>
                    <div className="searchhelper">Search Your Contacts and Chat History</div>
                </div>
			);
		 }
	});
	
	var ChatContact = React.createClass({
		render: function() {
			return (
				<div className="chatbar-contacts">
					<ContactSearch />
					<ContactList />
				</div>
			);
		 }
	});
	
	var ChatMessage = React.createClass({
		render: function() {
			return (
				<li className="message">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatReply = React.createClass({
		render: function() {
			return (
				<li className="message reply">
                    <div className="message-info">
                        <div className="bullet"></div>
                        <div className="contact-name">{this.props.sender}</div>
                        <div className="message-time">{this.props.time}</div>
                    </div>
                    <div className="message-body">
						{this.props.text}
                    </div>
                </li>
			);
		 }
	});
	
	var ChatList = React.createClass({
		componentDidMount: function() {
			var position = (readCookie("rtl-support") || location.pathname == "/index-rtl-fa.html" || location.pathname == "/index-rtl-ar.html") ? 'right' : 'left';
			var additionalHeight = 0;
			if ($(window).width() < 531)
				additionalHeight = 45;
			$('.chatbar-messages .messages-list').slimscroll({
				position: position,
				size: '4px',
				color: themeprimary,
				height: $(window).height() - (250 + additionalHeight),
			});
		},
		render: function() {
			return (
				<ul className="messages-list">
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                    <ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatMessage sender="Me" time="10:14 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
					<ChatReply sender="Divyia" time="10:15 AM, Today" text="Hi, Hope all is good. Are we meeting today?" />
                 </ul>
			);
		 }
	});
	
	var ChatSend = React.createClass({
		render: function() {
			return (
				<div className="send-message">
                    <span className="input-icon icon-right">
                        <textarea rows="4" className="form-control" placeholder="Type your message"></textarea>
                        <i className="fa fa-camera themeprimary"></i>
                    </span>
                </div>
			);
		 }
	});
	
	var ChatBarContact = React.createClass({
		handleClick: function(e) {
			$('.page-chatbar .chatbar-contacts').show();
			$('.page-chatbar .chatbar-messages').hide();
		},
		render: function() {
			return (
				<div className="messages-contact">
                    <div className="contact-avatar">
                        <img src="assets/img/avatars/divyia.jpg" />
                    </div>
                    <div className="contact-info">
                        <div className="contact-name">{this.props.name}</div>
                        <div className="contact-status">
                            <div className="online"></div>
                            <div className="status">{this.props.status}</div>
                        </div>
                        <div className="last-chat-time">
							{this.props.time}
                        </div>
                        <div className="back" onClick={this.handleClick}>
                            <i className="fa fa-arrow-circle-left"></i>
                        </div>
                    </div>
                </div>
			);
		 }
	});
	
	var ChatBarMessage = React.createClass({
		render: function() {
			return (
				<div className="chatbar-messages" style={{display: 'none'}}>
					<ChatBarContact name="Divyia Philips" status="online" time="a moment ago" />
					<ChatList />
					<ChatSend />
				</div>
			);
		 }
	});
	
	var ChatBar = React.createClass({
		render: function() {
			return (
				<div id="chatbar" className="page-chatbar">
					<ChatContact />
					<ChatBarMessage />
				</div>
			);
		 }
	});
	
	var ProfileHeader = React.createClass({
		render: function() {
			return (
				<div className="profile-header row">
					<div className="col-lg-2 col-md-4 col-sm-12 text-center">
						<img src="assets/img/avatars/divyia.jpg" alt="" className="header-avatar" />
					</div>
					<div className="col-lg-5 col-md-8 col-sm-12 profile-info">
						<div className="header-fullname">Kim Ryder</div>
						<a href="#" className="btn btn-palegreen btn-sm  btn-follow">
							<i className="fa fa-check"></i>
							Following
						</a>
						<div className="header-information">
							Kim is a software developer in Microsoft. She works in ASP.NET MVC Team and collaborates with other teams.
						</div>
					</div>
					<div className="col-lg-5 col-md-12 col-sm-12 col-xs-12 profile-stats">
						<div className="row">
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
								<div className="stats-value pink">284</div>
								<div className="stats-title">FOLLOWING</div>
							</div>
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
								<div className="stats-value pink">803</div>
								<div className="stats-title">FOLLOWERS</div>
							</div>
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
								<div className="stats-value pink">1207</div>
								<div className="stats-title">POSTS</div>
							</div>
						</div>
						<div className="row">
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 inlinestats-col">
								<i className="glyphicon glyphicon-map-marker"></i> Boston
							</div>
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 inlinestats-col">
								Rate: <strong>$250</strong>
							</div>
							<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 inlinestats-col">
								Age: <strong>24</strong>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var ProfileBody = React.createClass({
		render: function() {
			return (
				<div className="profile-body">
					<div className="col-lg-12">
						<div className="tabbable">
							<ul className="nav nav-tabs tabs-flat  nav-justified" id="myTab11">
								<li className="active">
									<a data-toggle="tab" href="#overview">
										Overview
									</a>
								</li>
								<li className="tab-red">
									<a data-toggle="tab" href="#timeline">
										Events
									</a>
								</li>
								<li className="tab-palegreen">
									<a data-toggle="tab" id="contacttab" href="#contacts">
										Contacts
									</a>
								</li>
								<li className="tab-yellow">
									<a data-toggle="tab" href="#settings">
										Settings
									</a>
								</li>
							</ul>
							<div className="tab-content tabs-flat">
								<div id="overview" className="tab-pane active">
									<div className="row profile-overview">
										<div className="col-md-8">
											<h6 className="row-title before-themeprimary no-margin-top">PROFILE VISITS</h6>
											<div id="visit-chart" className="chart"></div>
											<h6 className="row-title before-orange">FOLLOWERS</h6>
											<div className="row">
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/Javi-Jimenez.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat orange radius-bordered">
																<i className="stat-icon glyphicon glyphicon-remove"></i>
															</div>
															<div className="databox-text darkgray">JAVI JIMENEZ</div>
															<div className="databox-text darkgray">Manager</div>
														</div>
													</div>
												</div>
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/adam-jansen.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat palegreen radius-bordered">
																<i className="stat-icon glyphicon glyphicon-plus"></i>
															</div>
															<div className="databox-text darkgray">LEE MUNROE</div>
															<div className="databox-text darkgray">Developer</div>
														</div>
													</div>
												</div>
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/Nicolai-Larson.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat palegreen radius-bordered">
																<i className="stat-icon glyphicon glyphicon-plus"></i>
															</div>
															<div className="databox-text darkgray">NICOLAI LARSON</div>
															<div className="databox-text darkgray">Manager</div>
														</div>
													</div>
												</div>

											</div>
											<h6 className="row-title before-palegreen">FOLLOWING</h6>
											<div className="row">
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/John-Smith.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat orange radius-bordered">
																<i className="stat-icon glyphicon glyphicon-remove"></i>
															</div>
															<div className="databox-text darkgray">JOHN SMITH</div>
															<div className="databox-text darkgray">Architect</div>
														</div>
													</div>
												</div>
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/Matt-Cheuvront.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat palegreen radius-bordered">
																<i className="stat-icon glyphicon glyphicon-plus"></i>
															</div>
															<div className="databox-text darkgray">MATT CHEUVRONT</div>
															<div className="databox-text darkgray">Developer</div>
														</div>
													</div>
												</div>
												<div className="col-lg-4 col-sm-6 col-xs-12">
													<div className="databox databox-graded">
														<div className="databox-left no-padding">
															<img src="assets/img/avatars/Stephanie-Walter.jpg" style={{"width":"65px","height":"65px"}}/>
														</div>
														<div className="databox-right padding-top-20 bg-whitesmoke">
															<div className="databox-stat orange radius-bordered">
																<i className="stat-icon glyphicon glyphicon-remove"></i>
															</div>
															<div className="databox-text darkgray">KATE WALTER</div>
															<div className="databox-text darkgray">Developer</div>
														</div>
													</div>
												</div>

											</div>
											<h6 className="row-title before-yellow">YOU MAY ALSO KNOW</h6>
											<div className="row">
												<div className="col-lg-6 col-sm-6 col-xs-12">
													<div className="databox databox-xlg databox-halved databox-shadowed databox-vertical no-margin-bottom">
														<div className="databox-top bg-white padding-10">
															<div className="col-lg-4 col-sm-4 col-xs-4">
																<img src="assets/img/avatars/Sergey-Azovskiy.jpg" style={{"width":"75px","height":"75px"}} className="image-circular bordered-3 bordered-palegreen"/>
															</div>
															<div className="col-lg-8 col-sm-8 col-xs-8 text-align-left padding-10">
																<span className="databox-header carbon no-margin">Martin James</span>
																<span className="databox-text lightcarbon no-margin"> Software Manager at Microsoft </span>
															</div>
														</div>
														<div className="databox-bottom bg-white no-padding">
															<div className="databox-row row-12">
																<div className="databox-row row-6 no-padding">
																	<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
																		<span className="databox-text sonic-silver  no-margin">Posts</span>
																		<span className="databox-number lightcarbon no-margin">510</span>
																	</div>
																	<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
																		<span className="databox-text sonic-silver no-margin">Followers</span>
																		<span className="databox-number lightcarbon no-margin">908</span>
																	</div>
																	<div className="databox-cell cell-4 no-padding text-align-center">
																		<span className="databox-text sonic-silver no-margin">Following</span>
																		<span className="databox-number lightcarbon no-margin">286</span>
																	</div>
																</div>
																<div className="databox-row row-6 padding-10">
																	<button className="btn btn-palegreen btn-sm pull-right">FOLLOW</button>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div className="col-lg-6 col-sm-6 col-xs-12">
													<div className="databox databox-xlg databox-halved databox-shadowed databox-vertical no-margin-bottom">
														<div className="databox-top bg-white padding-10">
															<div className="col-lg-4 col-sm-4 col-xs-4">
																<img src="assets/img/avatars/Osvaldus-Valutis.jpg" style={{"width":"75px","height":"75px"}} className="image-circular bordered-3 bordered-palegreen"/>
															</div>
															<div className="col-lg-8 col-sm-8 col-xs-8 text-align-left padding-10">
																<span className="databox-header carbon no-margin">Osvaldus Valutis</span>
																<span className="databox-text lightcarbon no-margin"> Graphic Designer at Yahoo! </span>
															</div>
														</div>
														<div className="databox-bottom bg-white no-padding">
															<div className="databox-row row-12">
																<div className="databox-row row-6 no-padding">
																	<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
																		<span className="databox-text sonic-silver  no-margin">Posts</span>
																		<span className="databox-number lightcarbon no-margin">102</span>
																	</div>
																	<div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
																		<span className="databox-text sonic-silver no-margin">Followers</span>
																		<span className="databox-number lightcarbon no-margin">634</span>
																	</div>
																	<div className="databox-cell cell-4 no-padding text-align-center">
																		<span className="databox-text sonic-silver no-margin">Following</span>
																		<span className="databox-number lightcarbon no-margin">100</span>
																	</div>
																</div>
																<div className="databox-row row-6 padding-10">
																	<button className="btn btn-palegreen btn-sm pull-right">FOLLOW</button>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div className="col-md-4">
											<form method="post" className="well padding-bottom-10" onsubmit="return false;">
												<span className="input-icon icon-right">
													<textarea rows="2" className="form-control" placeholder="Post a new message"></textarea>
													<i className="fa fa-camera themeprimary"></i>
												</span>
												<div className="padding-top-10 text-align-right">
													<a className="btn btn-sm btn-primary">
														Send
													</a>
												</div>
											</form>
											<div>
												<div className="comment">
													<img src="assets/img/avatars/adam-jansen.jpg" alt="" className="comment-avatar"/>
													<div className="comment-body">
														<div className="comment-text">
															<div className="comment-header">
																<a href="#" title="">Adam Jansen</a><span>about 2 minuts ago</span>
															</div>
															Story based around the idea of time lapse, animation to post soon!
														</div>
														<div className="comment-footer">
															<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
															<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
															<a href="#">Reply</a>
														</div>
													</div>

													<div className="comment">
														<img src="assets/img/avatars/John-Smith.jpg" alt="" className="comment-avatar"/>
														<div className="comment-body">
															<div className="comment-text">
																<div className="comment-header">
																	<a href="#" title="">John Smith</a><span>about 1 hour ago</span>
																</div>
																Wow impressive!
															</div>
															<div className="comment-footer">
																<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
																<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
																<a href="#">Reply</a>
															</div>
														</div>
													</div>

													<div className="comment">
														<img src="assets/img/avatars/Matt-Cheuvront.jpg" alt="" className="comment-avatar"/>
														<div className="comment-body">
															<div className="comment-text">
																<div className="comment-header">
																	<a href="#" title="">Matt Cheuvront</a><span>about 2 hours ago</span>
																</div>
																Wow, that is really nice.
															</div>
															<div className="comment-footer">
																<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
																<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
																<a href="#">Reply</a>
															</div>
														</div>

														<div className="comment">
															<img src="assets/img/avatars/Stephanie-Walter.jpg" alt="" className="comment-avatar"/>
															<div className="comment-body">
																<div className="comment-text">
																	<div className="comment-header">
																		<a href="#" title="">Stephanie Walter</a><span>3 hours ago</span>
																	</div>
																	Nice work, makes me think of The Money Pit.
																</div>
																<div className="comment-footer">
																	<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
																	<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
																	<a href="#">Reply</a>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div className="comment">
													<img src="assets/img/avatars/divyia.jpg" alt="" className="comment-avatar"/>
													<div className="comment-body">
														<div className="comment-text">
															<div className="comment-header">
																<a href="#" title="">Kim Ryder</a><span>about 4 hours ago</span>
															</div>
															i'm in the middle of a timelapse animation myself! (Very different though.) Awesome stuff.
														</div>
														<div className="comment-footer">
															<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
															<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
															<a href="#">Reply</a>
														</div>
													</div>
												</div>
												<div className="comment">
													<img src="assets/img/avatars/Nicolai-Larson.jpg" alt="" className="comment-avatar"/>
													<div className="comment-body">
														<div className="comment-text">
															<div className="comment-header">
																<a href="#" title="">Nicolai Larson</a><span>10 hours ago</span>
															</div>
															the parallax is a little odd but O.o that house build is awesome!!
														</div>
														<div className="comment-footer">
															<a href="#"><i className="fa fa-thumbs-o-up"></i></a>
															<a href="#"><i className="fa fa-thumbs-o-down"></i></a>
															<a href="#">Reply</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div id="timeline" className="tab-pane">
									<ul className="timeline animated fadeInDown">
										<li>
											<div className="timeline-datetime">
												<span className="timeline-time">
													8:19
												</span><span className="timeline-date">Today</span>
											</div>
											<div className="timeline-badge blue">
												<i className="fa fa-tag"></i>
											</div>
											<div className="timeline-panel">
												<div className="timeline-header bordered-bottom bordered-blue">
													<span className="timeline-title">
														New Items Arrived
													</span>
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Today</span>
															-
															<span className="timeline-time">8:19</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<p>Purchased new stationary items for head office</p>
												</div>
											</div>
										</li>
										<li className="timeline-inverted">
											<div className="timeline-datetime">
												<span className="timeline-time">
													3:10
												</span><span className="timeline-date">Today</span>
											</div>
											<div className="timeline-badge darkorange">
												<i className="fa fa-map-marker font-120"></i>
											</div>
											<div className="timeline-panel bordered-right-3 bordered-orange">
												<div className="timeline-header bordered-bottom bordered-blue">
													<span className="timeline-title">
														Visit Appointment
													</span>
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Today</span>
															-
															<span className="timeline-time">3:10</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<p>Outdoor visit at California State Route 85 with John Boltana &amp; Harry Piterson regarding to setup a new show room.</p>
													<p>
														<i className="orange fa fa-exclamation"></i> New task added for <span><a href="#" className="info">James Dean</a></span>
													</p>
												</div>
											</div>
										</li>

										<li>
											<div className="timeline-datetime">
												<span className="timeline-time">
													8:19
												</span><span className="timeline-date">Yesterday</span>
											</div>
											<div className="timeline-badge sky">
												<i className="fa fa-bar-chart-o"></i>
											</div>
											<div className="timeline-panel bordered-top-3 bordered-azure">
												<div className="timeline-header bordered-bottom bordered-blue">
													<span className="timeline-title">
														Bank Report
													</span>
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Yesterday</span>
															-
															<span className="timeline-time">8:19</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<p>
														Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sem neque sed ipsum.
													</p>
													Tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
												</div>
											</div>
										</li>
										<li className="timeline-inverted">
											<div className="timeline-datetime">
												<span className="timeline-time">
													6:08
												</span><span className="timeline-date">Yesterday</span>
											</div>
											<div className="timeline-badge sky">
												<img src="assets/img/avatars/Sergey-Azovskiy.jpg" className="badge-picture" />
											</div>
											<div className="timeline-panel">
												<div className="timeline-header bordered-bottom bordered-blue">
													<span className="timeline-title">
														<a href="">Sergey Azovskiy</a> has commented on your <a href="">status</a>
													</span>
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Yesterday</span>
															-
															<span className="timeline-time">6:08</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<p>
														<i className="orange fa fa-quote-left"></i> Happy Birthday Lydia.
													</p>
												</div>
											</div>
										</li>
										<li>
											<div className="timeline-datetime">
												<span className="timeline-time">
													7:00
												</span><span className="timeline-date">Yesterday</span>
											</div>
											<div className="timeline-badge danger">
												<i className="fa fa-exclamation font-120"></i>
											</div>
											<div className="timeline-panel">
												<div className="timeline-header bordered-bottom bordered-blue">
													<span className="timeline-title danger">
														Deadline Added
													</span>
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Yesterday</span>
															-
															<span className="timeline-time">7:00</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<p>Dyvia Phillips added new milestone <span><a className="danger" href="#">UI</a></span> Lorem ipsum dolor sit amet consiquest dio</p>
												</div>
											</div>
										</li>
										<li className="timeline-inverted">
											<div className="timeline-datetime">
												<span className="timeline-time">
													3:09
												</span><span className="timeline-date">Yesterday</span>
											</div>
											<div className="timeline-badge">
												<i className="fa fa-picture-o darkpink"></i>
											</div>
											<div className="timeline-panel">
												<div className="timeline-header bordered-bottom bordered-blue">
													<p className="timeline-datetime">
														<small className="text-muted">
															<i className="glyphicon glyphicon-time">
															</i>
															<span className="timeline-date">Yesterday</span>
															-
															<span className="timeline-time">3:09</span>
														</small>
													</p>
												</div>
												<div className="timeline-body">
													<a href="#">John Travolta</a> shared an image on <a href="#">Dribble</a>
													<div className="tl-wide text-center" style={{"padding":"5px","marginTop":"10px","marginBottom":"10px"}}>
														<img src="assets/img/temp1.png" alt="" style={{"maxHeight":"158px","maxWidth":"100%"}}/>
													</div>
													<i className="text-muted text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
												</div>
											</div>
										</li>
										<li className="timeline-node">
											<a className="btn btn-yellow">LOAD MORE</a>
										</li>
									</ul>
								</div>
								<div id="contacts" className="tab-pane">
									<div className="row">
										<div className="col-md-6">
											<div className="profile-contacts">

												<div className="profile-badge orange"><i className="fa fa-phone orange"></i><span>Contacts</span></div>
												<div className="contact-info">
													<p>
														Phone	: +1 1 2345 6789 <br/>
														Cell		: +1 9 876 5432
													</p>
													<p>
														Email		: kim@gmail.com
														<br/>
														Skype		: kim.ryder
													</p>
													<p>
														Facebook	: facebook.com/Kim.Ryder
														<br/>
														Twitter	: @KimRyder
													</p>
												</div>
												<div className="profile-badge azure">
													<i className="fa fa-map-marker azure"></i><span>Location</span>
												</div>
												<div className="contact-info">
													<p>
														Address<br/>
														Department 98<br/>
														44-46 Morningside Road<br/>
														Toronto, Canada
													</p>
													<p>
														Office<br/>
														44-46 Morningside Road<br/>
														Toronto, Canada
													</p>
												</div>
											</div>
										</div>
										<div className="col-md-6">
											<div id="contact-map" className="animated flipInY"></div>
										</div>
									</div>
								</div>
								<div id="settings" className="tab-pane">
									<form role="form">
										<div className="form-title">
											Personal Information
										</div>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Name"/>
														<i className="fa fa-user blue"></i>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Family"/>
														<i className="fa fa-user orange"></i>
													</span>
												</div>
											</div>
										</div>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Phone"/>
														<i className="glyphicon glyphicon-earphone yellow"></i>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Mobile"/>
														<i className="glyphicon glyphicon-phone palegreen"></i>
													</span>
												</div>
											</div>
										</div>
										<hr className="wide"/>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input className="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" placeholder="Birth Date"/>
														<i className="fa fa-calendar"></i>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Birth Place"/>
														<i className="fa fa-globe"></i>
													</span>
												</div>
											</div>
										</div>
										<div className="form-title">
											Social Networks
										</div>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Facebook"/>
														<i className="fa fa-facebook purple"></i>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Twitter"/>
														<i className="fa fa-twitter azure"></i>
													</span>
												</div>
											</div>
										</div>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Pinterest"/>
														<i className="fa fa-pinterest red"></i>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Flickr"/>
														<i className="fa fa-flickr blue"></i>
													</span>
												</div>
											</div>
										</div>
										<div className="form-title">
											Contact Information
										</div>
										<div className="row">
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Address 1"/>
													</span>
												</div>
											</div>
											<div className="col-sm-6">
												<div className="form-group">
													<span className="input-icon icon-right">
														<input type="text" className="form-control" placeholder="Address 1"/>
													</span>
												</div>
											</div>
										</div>
										<button type="submit" className="btn btn-primary">Save Profile</button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var PageContent = React.createClass({
		fullScreenClick: function(e) {
			var element = document.documentElement;
			if (!$('body').hasClass("full-screen")) {
				$('body').addClass("full-screen");
				$('#fullscreen-toggler').addClass("active");
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
						element.webkitRequestFullscreen();
					} else if (element.msRequestFullscreen) {
						element.msRequestFullscreen();
					}
			} else {
				$('body').removeClass("full-screen");
				$('#fullscreen-toggler').removeClass("active");
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen();
				}
			}
		},
		sideBarClick: function(e) {
			$("#sidebar").toggleClass("hide");
			$(".sidebar-toggler").toggleClass("active");
			return false;
		},
		render: function() {
			return (
				<div className="page-content">

					<div className="page-breadcrumbs">
						<ul className="breadcrumb">
							<li>
								<i className="fa fa-home"></i>
								<a href="#">Home</a>
							</li>
							<li>
								<a href="#">Pages</a>
							</li>
							<li className="active">Profile</li>
						</ul>
					</div>

					<div className="page-header position-relative">
						<div className="header-title">
							<h1>
								User Profile
							</h1>
						</div>

						<div className="header-buttons">
							<a className="sidebar-toggler" href="#" onClick={this.sideBarClick}>
								<i className="fa fa-arrows-h"></i>
							</a>
							<a className="refresh" id="refresh-toggler" href="">
								<i className="glyphicon glyphicon-refresh"></i>
							</a>
							<a className="fullscreen" id="fullscreen-toggler" href="#" onClick={this.fullScreenClick}>
								<i className="glyphicon glyphicon-fullscreen"></i>
							</a>
						</div>

					</div>

					<div className="page-body">
						<div className="row">
							<div className="col-md-12">
								<div className="profile-container">
									<ProfileHeader />
									<ProfileBody />
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	});
	
	var WholePage = React.createClass({
		render: function() {
			return (
				<div>
					<div className="loading-container">
						<div className="loader"></div>
					</div>
					<Navbar />
					<div className="main-container container-fluid">
						<div className="page-container">
							<PageSidebar />
							<ChatBar />
							<PageContent />
						</div>
					</div>
				</div>
			);
		}
	});
	
	
	ReactDOM.render(
		<WholePage />,
		document.getElementById('content')
		);
	</script>

    <!--Basic Scripts-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

    <!--Beyond Scripts-->
    <script src="assets/js/beyond.min.js"></script>

    <!--Page Related Scripts-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/17/0/main.js" type="text/javascript"></script>

    <script src="assets/js/charts/flot/jquery.flot.js"></script>
    <script src="assets/js/charts/flot/jquery.flot.resize.js"></script>

    <script>
        //Google Map
        $('#contacttab').click(function () {
            function initialize() {
                var myLatlng = new google.maps.LatLng(43.6531935, -79.3806243);
                var mapOptions = {
                    zoom: 15,
                    scrollwheel: false,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById('contact-map'), mapOptions);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Map'
                });
            }
            google.maps.event.addDomListener(window, 'click', initialize);
        });

        $(window).bind("load", function () {

            /*Sets Themed Colors Based on Themes*/
            themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');

            //--------------------------Visitor Chart --->
            var data = [{
                color: themeprimary,
                label: "Visits",
                data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
                    [14, 14], [15, 12], [16, 14], [17, 15]]
            }];
            var options = {
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0 }] }
                    },
                    points: {
                        show: true
                    }
                },
                legend: {
                    show: false
                },
                xaxis: {
                    tickDecimals: 0,
                    tickLength: 0,
                    color: '#ccc'
                },
                yaxis: {
                    min: 0,
                    tickLength: 0,
                    color: '#ccc'
                },
                grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 0,
                    aboveData: false,
                    color: '#fbfbfb'

                },
                tooltip: true
            };
            var placeholder = $("#visit-chart");
            var plot = $.plot(placeholder, data, options);
        });
    </script>
    
</body>
<!--  /Body -->
</html>
